<template>
    <p>Is target visible? {{ targetIsVisible }} {{ percent + '%' }}</p>
    <div class="container" ref="container">
      <div class="target" ref="target">
        <h1>Hello world, 看见我露头了吗？{{ percent + '%' }}</h1>
      </div>
    </div>
</template>
<script setup>
import { useIntersectionObserver } from '@/useHooks';
import {ref} from "vue"

const target = ref(null);
const container = ref(null);
const targetIsVisible = ref(false);
const percent = ref(0);

const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting, intersectionRatio, target }], observerElement) => {
    targetIsVisible.value = isIntersecting;
    console.log('---',intersectionRatio );
    percent.value = Math.floor(intersectionRatio.toFixed(2) * 100); // 显示元素可见内容
    target.style.opacity = intersectionRatio.toFixed(2); // 动态改变元素样式
  },
  {
    root: container,
  },
);
</script>

<style>
.container {
  width: 80%;
  margin: auto;
  background-color: #fafafa;
  max-height: 300px;
  overflow: scroll;
}
.target {
  margin: 500px 0 100px;
  background-color: #1abc9c;
  color: white;
  padding: 50px;

}
</style>